<template>
    <div class="product-management">
        <h1>产品数据统计</h1>
        <!-- 统计数据卡片 -->
        <div style="display: flex;margin-top: 10px;" class="animate__animated animate__bounceInDown">
            <div class="content" style="padding-right: 10px; padding-left: 10px;">
                <div class="small-panel suspension">
                    <div class="small-panel-title">总销售额</div>
                    <div class="small-panel-content">
                        <div style="display: flex;text-align: center;">
                            <i class="fa fa-line-chart iconfont icon-dangrixiaoshoue"
                                style="font-size: 28px; color: rgb(133, 149, 244);">
                            </i>
                            <div style=""><span style="font-size: 28px;">{{data.request.totalPrice}}(元)</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content" style="padding-right: 10px; padding-left: 10px;">
                <div class="small-panel suspension">
                    <div class="small-panel-title">今日销售额</div>
                    <div class="small-panel-content">
                        <div style="display: flex;text-align: center;">
                            <i class="fa fa-line-chart iconfont icon-consumption"
                                style="font-size: 28px; color: rgb(133, 149, 244);">
                            </i>
                            <div style=""><span style="font-size: 28px;">{{data.request.todayprice}}(元)</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content" style="padding-right: 10px; padding-left: 10px;">
                <div class="small-panel suspension">
                    <div class="small-panel-title">服务类</div>
                    <div class="small-panel-content">
                        <div style="display: flex;text-align: center;">
                            <el-icon style="font-size: 28px; color: rgb(133, 149, 244);margin-top: 8px;">
                                <Promotion />
                            </el-icon>
                            <div style=""><span style="font-size: 28px;">{{data.request.fwtype}}(个)</span></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="content" style="padding-right: 10px; padding-left: 10px;">
                <div class="small-panel suspension">
                    <div class="small-panel-title">实物类</div>
                    <div class="small-panel-content">
                        <div style="display: flex;text-align: center;">

                            <el-icon style="font-size: 28px; color: rgb(133, 149, 244);margin-top: 8px;">
                                <Star />
                            </el-icon>
                            <div style=""><span style="font-size: 28px;">{{data.request.swtype}}个)</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 销量火爆产品 -->
        <div style="display: flex; width: 100%;margin-top: 10px;" class="animate__animated animate__fadeInTopRight">
            <div class="pro_left suspension">
                <div style="border-bottom: 1px solid #eeee;text-align: center;">
                    <i class="iconfont icon-huoyan" style="color: red;font-size: 18px;" /> 服务类销量火爆产品
                </div>
                <!-- 图表 -->
                <div ref="Fwprochar" style="width: 100%;height: 100%;">

                </div>
            </div>

            <div class="pro_right suspension">

                <div style="border-bottom: 1px solid #eeee;text-align: center;">
                    <i class="iconfont icon-huoyan" style="color: red;font-size: 18px;" /> 实物类销量火爆产品
                </div>
                <!-- 图表 -->
                <div ref="Swprochar" style="width: 100%;height: 100%;">

                </div>

            </div>
        </div>

        <div class="monthpro suspension">
            <div style="border-bottom: 1px solid #eeee;text-align: center;font-size: 24px;">
                    <i class="iconfont icon-huoyan" style="color: red;font-size: 24px;" />每月数据销量
                </div>
            <!-- 每月销量数据图表 -->
            <div ref="monthlySalesChartRef" class="monthly-sales-chart"
                style="width: 100%; height: 400px"></div>

        </div>

    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from 'vue';
import * as echarts from 'echarts';
import { Promotion, Star } from '@element-plus/icons-vue'
import type { pro_Dto } from '@/Dto/Request/product/pro';
import { GetFwSales, GetSwSales, GetTypeCount, MonthsSales, TodayPrice, TotalPrice } from '@/api/count';
// 图表 DOM 引用
const monthlySalesChartRef = ref<HTMLElement | null>(null);
//服务
const Fwprochar = ref<HTMLElement | null>(null);
//实物
const Swprochar = ref<HTMLElement | null>(null);

const data=reactive<pro_Dto>({

    request:{
        todayprice:0,
        totalPrice:0,
        fwtype:0,
        swtype:0,
        FwSales:[],
        Swsales:[],
        Monthsales:[]
    }
})



const methods={
    async bind(){
        //今日销售额
        const res=await TodayPrice()
        if(res.code===0){
            data.request.todayprice=res.data
        }
        const totalPrice=await TotalPrice()
        if(totalPrice.code===0){
            data.request.totalPrice=totalPrice.data
        }
        const typeCount=await GetTypeCount()
        if(typeCount.code===0){
            data.request.fwtype=typeCount.data.ftype
            data.request.swtype=typeCount.data.stype
        }
        const fwsales=await GetFwSales()
        if(fwsales.code===0){
            data.request.fwsales=fwsales.data
        }
        const swsales=await GetSwSales()
        if(swsales.code===0){
            data.request.swsales=swsales.data
        }
        const monthsales=await MonthsSales()
        if(monthsales.code===0){
            data.request.MonthsSales=monthsales.data
        }
        console.log(monthsales.data,'::::::::::::')
    },

    //绘制实物类销量图表
    SwproEach() {
        if (Swprochar.value) {
            const swpack = echarts.init(Swprochar.value);
            const option = {
                legend: {
                    top: '5%',
                    left: 'center'
                },
                tooltip: {
                    trigger: 'item'
                },
                series: [
                    {
                        name: '实物类产品销量',
                        type: 'pie',
                        radius: ['40%', '70%'],
                        roseType: 'area',
                        padAngle: 5,
                        itemStyle: {
                            borderRadius: 8
                        },

                        data: data.request.swsales
                    }
                ]
            }
            option && swpack.setOption(option);
        }
    },
    //绘制服务类销量图表
    FwproEach(){
        if (Fwprochar.value) {
        const fwpack = echarts.init(Fwprochar.value);
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [
                {
                    name: '服务类产品销量',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    padAngle: 5,
                    itemStyle: {
                        borderRadius: 10
                    },
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 40,
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: data.request.fwsales
                }
            ]
        };
        option && fwpack.setOption(option);
    }
    },
    // 绘制每月销量数据图表
    drawMonthlySalesChart(){
        if (monthlySalesChartRef.value) {
        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        const chart = echarts.init(monthlySalesChartRef.value);
        const option = {
            xAxis: {
                type: 'category',
                data: data.request.MonthsSales.map((d:any)=>d.month)
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: data.request.MonthsSales.map((d:any)=>d.total),
                    type: 'line',
                    animation: true,
                    animationDuration: 1000,
                    animationEasing: 'cubicOut'
                }
            ]
        };
        chart.setOption(option);
    }
    }
}

onMounted(async() => {
    await methods.bind()
    methods.SwproEach();
    methods.FwproEach();
   methods.drawMonthlySalesChart();
});
</script>

<style scoped>

.monthpro{
    width: 100%;background: #ffffff;border-radius:8px ;height: 100%;margin-top: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.pro_right {
    flex: 1;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    background: #ffffff;
    border-radius: 8px;
    height: 400px;
    margin-left: 20px;
}

.pro_left {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 50%;
    height: 400px;
    background: #ffffff;
}

.product-management {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin: 8px;
    padding: 20px;
    border-radius: 8px;
}

.stats-cards {
    margin-bottom: 20px;
}

.small-panel {
    background-color: #e9edf2;
    border-radius: var(--el-border-radius-base);
    padding: 25px;
    margin-bottom: 20px;
}

.small-panel .small-panel-title {
    color: #92969a;
    font-size: 15px;
}

.small-panel .small-panel-content {
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
    color: #2c3f5d;
}

.small-panel .small-panel-content {
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
    color: #2c3f5d;
}

.content {
    width: 25%;
}

card_main :hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: rgba(0, 0, 0, 0.2) 0px 14px 24px;

}

.suspension {
    transition: all 0.3s ease;
}

.suspension:hover {

    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 14px 24px #0003;
}
</style>